<template>
  <div style="margin: 15px;" class="pay">
    <el-card class="Dbox">
      <div slot="header" style="margin: 0px">
        <span
          style="
            margin: 0px;
            display: flex;
            align-items: center;
            font-size: 18px;
          "
        >
          <img
            src="@/assets/img/txjl.png"
            style="width: 20px; margin-right: 5px"
          />
          查看奖励</span
        >
      </div>
      <div class="xhxBox" style="margin-top: -5px"></div>
    
      <!-- <el-divider></el-divider> -->
      <!-- tab-表格 -->
      <div style="margin: 20px 0px">
        <!-- <div class="exportButton">
          <el-button
            icon="el-icon-upload2"
            @click="withdrawExport"
            style="background: #f5f5f5"
            >导出</el-button
          >
        </div> -->
        <el-table :data="roleList" height="450">
       
          <el-table-column
            label="奖励时间"
            prop="createTime"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.createTime || "暂无" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="奖励模版名称" prop="userName" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.userName || "暂无" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="奖励依据" prop="nickName" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.nickName || "暂无" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="奖励模式"
            prop="withdrawalAccountType"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span
                v-show="scope.row.withdrawalAccountType == 'ALIPAYACCOUNTBOOK'"
                >记账本</span
              >
              <span v-show="scope.row.withdrawalAccountType == 'WUKONG'"
                >银行卡</span
              >
              <span v-show="scope.row.withdrawalAccountType == 'ALIPAY'"
                >支付宝</span
              >
            </template>
          </el-table-column>

          <el-table-column
            label="次数"
            prop="signAccountName"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.signAccountName || "暂无" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="规则说明"
            prop="amount"
            align="center"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <pagination
        style="margin: 0px 0px 50px 0px"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import { getInfo } from "@/api/login.js";
import { selectCapUserWalletList } from "@/api/base/index.js";
import {
  selectCapWithdrawalRecordList,
  CapWithdrawalRecordStatistics,
  exportXls,
  selectTransactionRecordPaging,
} from "@/api/finance/index.js";
export default {
  data() {
    return {
      //剩余未体现
      remaining: "",
      witStatus: [
        { label: "失败", value: "FAIL" },
        { label: "成功", value: "SUCCESS" },
        // {label: "转帐中",
        //   value: "转帐中"},
      ],
      formData: {
        field103: [],
        field105: undefined,
        mobile: "",
        field104: undefined,
        field106: undefined,
        field107: undefined,
        field108: undefined,
        field109: undefined,
        field110: undefined,
        field111: undefined,
      },
      searchrules: {
        field103: [],
        field105: [],
        mobile: [
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        field104: [],
        field106: [],
        field107: [],
        field108: [],
        field109: [],
        field110: [],
        field111: [
          {
            pattern:
              /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "身份证格式错误",
            trigger: "blur",
          },
        ],
      },
      field105Options: [
        {
          label: "记账本",
          value: "ALIPAYACCOUNTBOOK",
        },
        {
          label: "银行卡",
          value: "WUKONG",
        },
        {
          label: "支付宝",
          value: "ALIPAY",
        },
      ],
      field107Options: [
        {
          label: "成功",
          value: "SUCCESS",
        },
        {
          label: "失败",
          value: "FAIL",
        },
      ],
      //
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },

      // ..卡片总数据
      CardData: {},
      rules: {
        money: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
        region: [
          { required: true, message: "请选择提现类型", trigger: "change" },
        ],
        monetUser: [
          { required: true, message: "请选择提现账号", trigger: "blur" },
        ],
      },
      // ..提现账号下拉框数据
      monetUser: [],
      // 用户ID
      userId: null,

      // 时间
      dateRange: [],

      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 分页总条数
      total: 0,
      // 收入表格数据
      noticeList: [],
      // 状态数据字典
      typeOptions: [
        {
          dictLabel: "分润",
          dictValue: 0,
        },
        {
          dictLabel: "佣金",
          dictValue: 1,
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 收入类型
        amountType: "",
        // 时间
        // dateRange: "",
      },
      roleList: [],
      //判断是否为用户和租户
      userName: "",
    };
  },
  mounted() {
    this.formData.field103[0] =
      this.moment().format("YYYY") +
      "-" +
      this.moment().format("MM") +
      "-" +
      "01" +
      " " +
      "00:00:00";
    this.formData.field103[1] =
      this.moment().format("YYYY-MM-DD") + " " + "23:59:59";

    this.userName = sessionStorage.getItem("userName");

    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;
    if (this.userId) {
      this.getList();
    }
  },
  methods: {
    async getList() {
      //console.log(this.formData.field103, "时间");
      if (!this.formData.field103) {
        this.formData.field103 = [];
      }
      const param = {
        startTime: this.formData.field103[0], //创建时间
        endTime: this.formData.field103[1], //结束时间
        nickName: this.formData.field106, //昵称
        userName: this.formData.field104, //提现账户
        status: this.formData.field107, //提现状态
        withdrawalAccountType: this.formData.field105, //提现方式
        // userId: this.userId, //用户ID
        // userId:331,  //用户ID
        signTenantId: this.userId, //租户ID
        // signTenantId: 299,  //租户ID
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        withdrawalAccountNumber: this.formData.field110, //收款账户
        withdrawalAccountName: this.formData.field109, //收款户名
        signAccountName: this.formData.field108, //支付名称
      };
      const data = await selectTransactionRecordPaging(param);

      if (data.code == 200) {
        this.roleList = data.data.list;
        this.total = data.data.total;
      } else {
        this.$message.error(data.msg);
      }

      const card = await CapWithdrawalRecordStatistics(param);
      //console.log(card, "数据222222");
      if (data.code == 200) {
        this.CardData = card.data;
      }

      //卡片第四个是单独的接口

      const totalMoney = await selectCapUserWalletList({
        tenantId: this.userId,
      });
      //console.log(totalMoney, "卡片总余额222");
      if (totalMoney.code == 200) {
        this.remaining = totalMoney.data;
      }

      // if (this.userName != "用户") {
      //   //剩余未提现的卡片参数
      //   const totalMoney = await selectCapUserWalletList({
      //     userId: this.userId,
      //   });
      //   if (totalMoney.code == 200) {
      //     this.remaining = totalMoney.data;
      //   }
      // }
    },
    //导出
    async withdrawExport() {
      if (!this.formData.field103) {
        this.formData.field103 = [];
      }
      let param = {
        startTime: this.formData.field103[0], //创建时间
        endTime: this.formData.field103[1], //结束时间
        nickName: this.formData.field106, //昵称
        userName: this.formData.field104, //提现账户
        status: this.formData.field107, //提现状态
        withdrawalAccountType: this.formData.field105, //提现方式
        // userId: this.userId, //用户ID
        // userId:331,  //用户ID
        signTenantId: this.userId, //租户ID
        // signTenantId: 299,  //租户ID
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        withdrawalAccountNumber: this.formData.field110, //收款账户
        withdrawalAccountName: this.formData.field109, //收款户名
        signAccountName: this.formData.field108, //支付名称
      };
      const res = await exportXls(param);
      //console.log(res, "文件流");
      if (!res) return; //
      const excelTitle = "表格.xlsx";
      //触发另一个函数
      this.readFileDownload(res, excelTitle);
    },

    //导出函数2
    readFileDownload(data, msg) {
      var res = data;
      if (
        res.type === "application/json" ||
        res.type === "application/json;charset=UTF-8"
      ) {
        // 失败的时候，注意ie兼容问题
        let fileReader = new FileReader();
        fileReader.onload = function (event) {
          let jsonData = JSON.parse(this.result); // this.result是根据event，读取文件后打印的
          //console.log(jsonData, "...............");
          if (jsonData.data === null && jsonData.code === 1) {
            Message({
              message: jsonData.msg || "Error",
              type: "error",
              duration: 5 * 1000,
            });
          }
        };
        fileReader.readAsText(res);
      }
      if (
        res.type === "application/octet-stream" ||
        res.type === "application/vnd.ms-excel" ||
        res.type === "application/msexcel" ||
        res.type === "application/vnd.ms-excel;charset=UTF-8"
      ) {
        //console.log("success..."); // 成功，注意ie兼容问题

        const blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
          // type: "application/msexcel;charset=utf-8",
        });

        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob, msg);
        } else {
          //console.log(blob);
          const url = window.URL.createObjectURL(blob);
          //console.log(url);
          const aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", msg);
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink);
          window.URL.revokeObjectURL(url);
        }
      }
    },
    //搜索
    submitForm() {
      this.getList();
      //console.log(this.formData, "搜索按钮");
      // this.$refs["elForm"].validate((valid) => {
      //   if (valid) {

      //   };
      //   // TODO 提交表单
      // });
    },
    resetForm() {
      this.formData = {
        field103: [],
        field105: undefined,
        mobile: "",
        field104: undefined,
        field106: undefined,
        field107: undefined,
        field108: undefined,
        field109: undefined,
        field110: undefined,
        field111: undefined,
      };
      this.formData.field103 = [];

      this.formData.field103[0] =
        this.moment().format("YYYY") +
        "-" +
        this.moment().format("MM") +
        "-" +
        "01" +
        " " +
        "00:00:00";
      this.formData.field103[1] =
        this.moment().format("YYYY-MM-DD") + " " + "23:59:59";
      this.getList();
    },

    // ..分页器
    handleCurrentChange(value) {
      //console.log(value, "1");
    },
    handleSizeChange(value) {
      //console.log(value, "2");
      this.pageSizes = value;
      //console.log(this.pageSizes, "2");
    },
    // ..选择提现类型
    moneyType() {
      // //console.log(this.ruleForm.region, "5555555");
      // 1代表支付宝
      if (this.ruleForm.region == "1") {
        gutUserWithdrawalAccountSelectAlipay(this.ruleForm.region).then(
          (res) => {
            this.monetUser = res;
            this.ruleForm.monetUser = this.monetUser[0].id;
          }
        );
      } else {
        selectByPageNumSizeTxList({
          pageNum: 1,
          pageSize: 6,
        }).then((res) => {
          this.monetUser = res.data.list;
          //  //console.log( this.monetUser, "3333");
          this.ruleForm.monetUser = this.monetUser[0].id;
        });
        // gutUserWithdrawalAccountSelectBank("1").then((res) => {
        //   //console.log(res,'3333')
        //   this.monetUser = res;
        //   //console.log(this.monetUser[0].id);
        //   this.ruleForm.monetUser = this.monetUser[0].id;
        // });
      }
    },

    postSelectCapWithdrawalRecordListFun() {
      let objData = { ...this.queryParams };
      objData.userId = this.userId;
      // postSelectCapWithdrawalRecordList(objData).then((data) => {
      //   this.noticeList = data;
      //   this.loading = false;
      // });
    },
  },
};
</script>

<style scoped>
.Dbox{
  height: 100vh;
}
::v-deep .el-card__header {
  border: none;
}
.xhxBox {
  border-top: 1px #eee solid;
  height: 5px;
  margin-top: 0px;
}
.exportButton {
  /* border: 1px red solid; */
  display: flex;
  margin-bottom: 10px;
  justify-content: flex-end;
}
.el-form-item__label {
  font-weight: 500;
}
</style>
<style>
.pay .el-date-editor .el-range-separator {
  width: 15%;
}
.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
  overflow: scroll !important;
}
.pay .el-card__body {
  height: 100%;
}

.pay .pay-item {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pay .pay-item:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}

.pay .pay-item .pay-value {
  font-size: 24px;
  font-weight: bold;
}

.pay .pay-item .pay-value span {
  font-size: 10px;
  margin-right: -5px;
}

.pay .pay-item .value-color {
  color: #3a77f6;
}

.pay .pay-item .pay-label {
  font-size: 11px;
  margin-top: 10px;
}

.pay .el-divider--horizontal {
  background: #f0f0f0;
}

.pay .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
}

.pay .el-tabs__nav-wrap::after {
  height: 0;
}
</style>
